<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="avator" />
    <img src="" id="img" alt="" />
    <script>
      // 前端的文件下载
      /* let str = `<div>hello jj</div>`;
      let blod = new Blob([str], {
        type: 'text/html',
      });
      const a = document.createElement('a');
      a.setAttribute('download', 'index.html');
      a.href = URL.createObjectURL(blod);
      // a.innerHTML
      a.click();
      document.body.appendChild(a); */

      // 前端可以通过HTML5 实现二进制的读取

      avator.addEventListener('change', (e) => {
        let file = e.target.files[0];
        // let fileReader = new FileReader();
        // fileReader.onload = function () {
        //   img.src = fileReader.result;
        // };
        // fileReader.readAsDataURL(file);
        let url = URL.createObjectURL(file);
        img.src = url;
        // URL.revokeObjectURL(url);
      });

      // 浏览器中的二进制
      const arrBuffer = new ArrayBuffer(4);
      console.log(arrBuffer);
    </script>
  </body>
</html>
